<template>
  <div >
    <zh-row :span="24" :gutter="[16,16]">
      <zh-col :span="16">
      </zh-col>
      <zh-col :span="8" >
        <div>
          <span class="title-size1" >任务进度： </span>
          <ep-progress
              width="200px"
              :percent=this.wholeProgress
          />
        </div>

      </zh-col>
      <zh-col>
        <zh-table  ref="tableList" title="" row-id="roleId" style="width: 100%" :url="tableUrl" height="400px" size="medium"
                   :columns="tableColumn" >
          <template #progress="{ row }">
            <div class="alert-message">
              <i class="fa fa-exclamation-circle alert-message-icon"></i>
              <span class="alert-message-content">
                <ep-progress width="200px" :percent=row.progress></ep-progress>
            </span>
            </div>
          </template>
        </zh-table>

      </zh-col>
    </zh-row>
  </div>
</template>
<script>
import {getFinishRanking} from "@/services/system/whdngxlApi"
import moment from 'moment'
export default {
  name: 'DisposalRankingForm',
  components: {
  },
  data() {
    return {
      dictData: {},
      queryParam: {
        b0122:''},
      tableColumn: [
        {field: 'ranking', title: '排名', align: 'center', fixed: 'left',},
        {field: 'b0108', title: '街道名称',visible: true, align: 'center', fixed: 'left',},
        {field: 'disposedNum', title: '已处置数',sortable:true, align: 'center',  },
        {field: 'unDisposedNum', title: '未处置数',sortable:true, align: 'center',},
        {
          field: 'progress', title: '完成率',  align: 'center',slots: {
            // 使用插槽模板渲染
            default: 'progress'
          }
        },
        {field: 'averageTime',title: '完成效率(单位小时)',visible: true,sortable:true, align: 'center',},
      ],
      tableData: [],
      tableUrl: getFinishRanking,
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      wholeProgress:0,//整体进度
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    moment,
    initData(row){
      this.wholeProgress = Number(row.wholeProgress);
      this.findList(row)
    },
    findList(row) {
      this.queryParam.b0122 = row.b0122
      this.queryParam.c0303 = row.c0303
      this.$refs.tableList.query(this.queryParam)
    },
  },
  watch: {
  }
}
</script>
<style lang="less" scoped>
.title-size1 {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: rgb(36, 102, 208);
  font-weight: 600;
}
</style>